<template>
  <div>
    <div>

      <input type="button" value="批量删除" class="btn btn-danger" @click="deleteall"/>
    </div>
<h1>房型列表</h1>
    <table class="table table-bordered">
      <tbody>
      <tr bgcolor="#87ceeb">
        <td><input type="checkbox" v-model="checked" @click="checkalls"/>全选</td>
        <td>房型名称</td>
        <td>照片</td>
        <td>房价面积</td>
        <td>是否有窗户</td>
        <td>最大居住人数</td>
        <td>价格</td>
        <td>状态</td>
        <td>操作</td>
      </tr>
      <tr v-for="item in data.list">
        <td><input type="checkbox" v-model="ids" :value="item.Id" /></td>
        <td>{{ item.HouseTypeName }}</td>
        <td><img :src="item.Photo " width="100" height="100"></td>
        <td>{{ item.Area }}</td>
        <td>{{ item.IsWin==1?"带窗":"不带窗"}}</td>
        <td>{{ item.PeopleCount }}</td>
        <td>{{ item.Money }}</td>
        <td>{{ item.State=1?"发布":"不发布"}}</td>
        <td>
          <input type="button" value="修改" class="btn btn-warning"/>
          <input type="button" value="删除" class="btn btn-danger"/>
        </td>
      </tr>
      </tbody>
    </table>
    <div>
      <span>共<b>{{data.totalcount}}</b>条</span>
      <span>当前第<b>{{info.pageindex}}</b>页</span>
      <span><b>{{info.pageindex}}</b></span>/<span><b>{{data.totalpage}}</b></span>

      <input type="button" value="首页" class="btn btn-warning" @click="page(1)"/>
      <input type="button" value="上一页" class="btn btn-warning" @click="page(info.pageindex-1)"/>
      <span v-for="item in data.totalpage" @click="page(item)">{{item}}</span>
      <input type="button" value="下一页" class="btn btn-warning" @click="page(info.pageindex+1)"/>
      <input type="button" value="尾页" class="btn btn-warning" @click="page(data.totalpage)"/>

      <input type="number" v-model="info.pageindex"/>
      <input type="button" value="跳转" @click="page(info.pageindex)" class="btn btn-warning"/>


      <select  v-model="info.pagesize" @change="getlist">
        <option :value="item" v-for="item in arr">每页{{item}}条</option>
      </select>

    </div>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ref, reactive, onMounted } from 'vue'
import { useRouter,useRoute } from 'vue-router'
import moment from "moment";
const router = useRouter()
const route = useRoute()
const page=(num:any)=>{
  if(num<=0)
  {
    info.pageindex=1;
  }
  if(num>data.totalpage)
  {
   info.pageindex=data.totalpage;
  }
  info.pageindex=num;
  getlist();
}
let arr:any=reactive([2,4,6,8,10])

onMounted(() => {
  getlist();
})
let checked:any=ref(false);
let ids:any=ref([]);


const checkalls=()=>{
  checked.value=!checked.value;
  if(checked.value==true)
  {
    ids.value = data.list.map((item:any)=>
    {
        return item.Id;
    })
  }
  else{
    ids.value =[];
  }
  console.log(ids);
}
//批量删除
const deleteall=()=>{
  axios({
    url:'/api/House/Delete',
    method:'delete',
    params:{id:ids.value.toString()
    }
  }).then((res)=>{
    if(res.data>0){
      alert("删除成功")
      getlist();
    }
    else {
      alert("删除失败")
    }
  })
}
///定义发送
let info:any=reactive({
  pageindex:1,
  pagesize:2,
  housename:"",
  area1:"",
  area2:"",
})
//定义接受
let data:any=reactive({
  totalcount:"",
  totalpage:"",
  list:[]
})
const getlist=()=>{
  axios({
    url:"/api/House/GetHouseList",
    method:"get",
    params:info
  }).then((res)=>{
    console.log(res)
    data.totalcount = res.data.totalcount
    data.totalpage = res.data.totalpage
    data.list = res.data.list
  })
}

</script>

<style>
span{
  margin:0 10px;
}
b{
  color:red;
}
</style>